<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>闭包</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        p {
            color: #f55;
            background: yellow;
            width: 200px;
            line-height: 100px;
            text-align: center;
            margin: 30px;
        }

        div {
            overflow: hidden;
        }

        .content {
            overflow: hidden;
        }

        .box {
            width: 100px;
            height: 100px;

        }

        .box1 {
            background-color: pink;
            margin-bottom: 100px;
        }

        .box2 {
            margin-top: 100px;
            background-color: yellow;
        }

        .box3 {
            border-top: 10px solid #000;
            border-bottom: 10px solid #000;
            background-color: yellow;
        }

        .box4 {
            width: 100px;
            height: 100px;
            background-color: red;
            float: left;
        }
    </style>
</head>

<body>

    <p>看看我的 margin是多少</p>
    <div>
        <p>看看我的 margin是多少</p>
    </div>
    <div>
        <div>好久没用过float了</div>
        <div style="color: blue;background: orange;">
            <div style="float: left;">
                <div>哈哈哈1--</div>
            </div>
            <div>2</div>
            <div>3</div>
        </div>
    </div>



    <script>
        var address = "beijing"
        // 定义：可以访问其他函数作用域内的变量的函数，就是闭包
        function a() {
            var thisDeName = "Shiler"
            return function () {
                return thisDeName
            }
        }

        var b = a()
        console.log(b())
    </script>
    <div class="content">
        <div class="box box1">
            盒子1
        </div>
    </div>
    <div class="content">
        <div class="box box2">
            盒子1
        </div>
    </div>

    <div class="pp">
        <div class="box3">
        </div>
        <div class="box4">box4</div>

    </div>


</body>

</html>